<template>
  <div>
    <el-table 
    style="width: 100%" 
    :data="songList"
    :default-sort = "{prop: 'index', order: 'descending'}"
     v-loading="loading"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="title" label="音乐标题" min-width="360" sortable></el-table-column>
      <el-table-column prop="artist" label="歌手" min-width="360" sortable></el-table-column>
      <el-table-column prop="album" label="专辑" min-width="180" sortable></el-table-column>
      <el-table-column prop="time" label="时长" min-width="80" sortable></el-table-column>

    </el-table>
  </div>
</template>
<script>
export default {
  name: "songList",
  props: {
    songList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: true
    };
  },
  computed: {
  },
  watch: {
    songList(songList) {
      if(songList) {
        setTimeout(() => {
          this.loading = false
        },500)
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>